<template>
  <el-date-picker
    class="defaultStyle"
    :style="cssstyle"
    :disabled="disabled"
    v-model="input"
    type="datetimerange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    @change="click"
    :value-format="valueFormat"
    :picker-options="pickerOptions"
    :default-time="['00:00:00', '23:59:59']"
  ></el-date-picker>
</template>

<script>
export default {
  name: "Date",
  props: {
    cssstyle: {
      type: Object,
      default() {
        return {};
      }
    },
    field: {
      type: String,
      default: ""
    },
    disabled: {
      type: Boolean,
      default: false
    },
    valueFormat: {
      type: String,
      default: "yyyy-MM-dd HH:mm:ss"
    },
    pickerOptions: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      input: []
    };
  },
  methods: {
    click() {
      this.$emit("click", { val: this.input, field: this.field });
    }
  },
  mounted() {},
  watch: {
    input(val) {
      this.$emit("click", { val: this.input, field: this.field });
    }
  }
};
</script>

<style lang='scss' scoped>
.defaultStyle {
  width: 390px;
}
</style>
